<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>订单列表</title>
    <link rel="stylesheet" href="css/iview.css">
    <script src="js/vue.min.js"></script>
    <script src="js/axios.min.js"></script>
    <script src="js/iview.min.js"></script>
</head>
<body>
    <div id="app">
        <div class="layout">
            <i-layout>
                <i-header><div>超时付款取消订单列表</div></i-header>
                <i-content>
                    <Row>
                        <i-col span="24" style="text-align: center;">
                            <i-table stripe :columns="columns1" :data="data1" style="margin: 0 auto"></i-table>
                        </i-col>
                    </Row>
                </i-content>
            </i-layout>
        </div>
    </div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{
            columns1 : [
                {
                    title: '订单号',
                    key: 'orderId',
                    align: "center"
                },
                {
                    title: '创建时间',
                    key: 'orderCreateTime',
                    align: "center",
                    render:(h, params) => {
                        let orderCreateTime = params.row.orderCreateTime;
                        orderCreateTime = orderCreateTime.replace("T"," ");
                        return h('div',orderCreateTime);
                    }
                },
                {
                    title: '修改时间',
                    key: 'orderUpdateTime',
                    align: "center",
                    render:(h, params) => {
                        let orderUpdateTime = params.row.orderCreateTime;
                        orderUpdateTime = orderUpdateTime.replace("T"," ");
                        return h('div',orderUpdateTime);
                    }
                },
                {
                    title: '订单状态',
                    key: 'orderState',
                    align: "center",
                    render:(h, params) => {
                        let orderState = params.row.orderState;
                        if (orderState===-1) {return h('div','付款超时取消')};
                    }
                }
            ],
            data1 : []
        },
        mounted() {
            this.getOrderListByTimeOut();
        },
        methods: {
            getOrderListByTimeOut() {
                let then = this;
                axios.get('/order/getOrderListByTimeOut')
                    .then((rep) => {
                        then.data1 = rep.data.data;
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            }
        }
    });
</script>
</html>